<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>故事接龙生成器 - 激发孩子创造力的神奇工具</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <span class="book-icon">📚</span>
                <h1>创意写作工具箱</h1>
            </div>
            <p class="subtitle">故事接龙 & 成语接龙故事，让学习变得有趣</p>
        </header>

        <!-- 模式选择器 -->
        <section class="mode-selector">
            <div class="mode-tabs">
                <button class="mode-tab active" data-mode="story" id="storyModeTab">
                    <span class="mode-icon">📖</span>
                    <span class="mode-label">故事接龙</span>
                </button>
                <button class="mode-tab" data-mode="idiom" id="idiomModeTab">
                    <span class="mode-icon">🏮</span>
                    <span class="mode-label">成语接龙故事</span>
                </button>
            </div>
        </section>

        <!-- 主要内容区 -->
        <main class="main-content">
            <!-- 故事接龙模式 -->
            <div class="mode-content" id="storyMode">
                <!-- 故事展示区 -->
                <section class="story-display">
                    <div class="story-container" id="storyContainer">
                        <div class="story-placeholder">
                            <div class="magic-wand">✨</div>
                            <h2>准备好开始你的故事了吗？</h2>
                            <p>在下方输入一个精彩的开头，让AI和你一起创造神奇的故事世界！</p>
                        </div>
                    </div>
                </section>

                <!-- 控制面板 -->
                <section class="control-panel">
                    <!-- 输入区域 -->
                    <div class="input-section" id="userInputSection">
                        <div class="input-group">
                            <label for="userInput">开始你的故事：</label>
                            <textarea 
                                id="userInput" 
                                placeholder="例如：有一天，一只会飞的猫咪来到了学校..."
                                rows="3"
                                maxlength="500"
                            ></textarea>
                            <div class="input-footer">
                                <span class="char-count">0/500</span>
                                <button class="btn btn-primary" id="startBtn" disabled>
                                    <span class="btn-icon">🚀</span>
                                    开始故事接龙
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- AI响应区 -->
                    <div class="ai-response-section" id="aiResponseSection" style="display: none;">
                        <div class="thinking-indicator" id="thinkingIndicator">
                            <div class="spinner"></div>
                            <span>AI正在思考精彩的故事...</span>
                        </div>
                        <div class="ai-response" id="aiResponse" style="display: none;">
                            <div class="response-content" id="responseContent"></div>
                            <div class="response-actions">
                                <button class="btn btn-secondary" id="regenerateBtn">
                                    <span class="btn-icon">🔄</span>
                                    重新生成
                                </button>
                                <button class="btn btn-primary" id="continueBtn">
                                    <span class="btn-icon">✏️</span>
                                    轮到我继续
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 继续输入区 -->
                    <div class="continue-section" id="continueSection" style="display: none;">
                        <div class="input-group">
                            <label for="continueInput">继续这个故事：</label>
                            <textarea 
                                id="continueInput" 
                                placeholder="现在轮到你了！继续讲述这个精彩的故事..."
                                rows="3"
                                maxlength="500"
                            ></textarea>
                            <div class="input-footer">
                                <span class="char-count">0/500</span>
                                <button class="btn btn-primary" id="submitContinueBtn">
                                    <span class="btn-icon">📝</span>
                                    提交我的故事
                                </button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 成语接龙故事模式 -->
            <div class="mode-content" id="idiomMode" style="display: none;">
                <!-- 成语接龙游戏区 -->
                <section class="idiom-game-display">
                    <div class="idiom-chain-container" id="idiomChainContainer">
                        <div class="idiom-placeholder">
                            <div class="idiom-wand">🏮</div>
                            <h2>开始成语接龙故事</h2>
                            <p>输入一个成语开始，我们将围绕这些成语创作精彩的故事！</p>
                        </div>
                    </div>
                </section>

                <!-- 成语控制面板 -->
                <section class="idiom-control-panel">
                    <!-- 成语输入区 -->
                    <div class="idiom-input-section" id="idiomInputSection">
                        <div class="input-group">
                            <label for="idiomInput">输入成语：</label>
                            <div class="idiom-input-wrapper">
                                <input 
                                    type="text" 
                                    id="idiomInput" 
                                    placeholder="例如：画龙点睛"
                                    maxlength="4"
                                >
                                <button class="btn btn-secondary" id="searchIdiomBtn">
                                    <span class="btn-icon">🔍</span>
                                    查询成语
                                </button>
                            </div>
                            <div class="input-footer">
                                <span class="idiom-hint">请输入一个四字成语开始</span>
                                <button class="btn btn-primary" id="startIdiomBtn" disabled>
                                    <span class="btn-icon">🎯</span>
                                    开始接龙
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 成语信息显示 -->
                    <div class="idiom-info-section" id="idiomInfoSection" style="display: none;">
                        <div class="idiom-card">
                            <div class="idiom-header">
                                <h3 class="idiom-text" id="currentIdiom">画龙点睛</h3>
                                <span class="idiom-pinyin" id="idiomPinyin">huà lóng diǎn jīng</span>
                            </div>
                            <div class="idiom-content">
                                <div class="idiom-meaning">
                                    <h4>释义：</h4>
                                    <p id="idiomMeaning">比喻写文章或讲话时，在关键处用几句话点明实质，使内容生动有力。</p>
                                </div>
                                <div class="idiom-example">
                                    <h4>例句：</h4>
                                    <p id="idiomExample">这篇文章的结尾画龙点睛，使主题更加突出。</p>
                                </div>
                                <div class="idiom-story">
                                    <h4>故事：</h4>
                                    <p id="idiomStory">传说张僧繇画龙不点眼睛，说点了就会飞走。人们不信，他点了两条龙的眼睛，果然雷电交加，破壁飞去。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- AI成语接龙响应区 -->
                    <div class="idiom-ai-response-section" id="idiomAiResponseSection" style="display: none;">
                        <div class="thinking-indicator" id="idiomThinkingIndicator">
                            <div class="spinner"></div>
                            <span>AI正在思考成语接龙...</span>
                        </div>
                        <div class="idiom-ai-response" id="idiomAiResponse" style="display: none;">
                            <div class="idiom-response-content">
                                <div class="next-idiom" id="nextIdiom">
                                    <h4>下一个成语：</h4>
                                    <div class="idiom-display">
                                        <span class="idiom-name" id="nextIdiomText">惊心动魄</span>
                                        <span class="idiom-pinyin-small" id="nextIdiomPinyin">jīng xīn dòng pò</span>
                                    </div>
                                </div>
                                <div class="idiom-story-part" id="idiomStoryPart">
                                    <h4>故事片段：</h4>
                                    <p id="idiomStoryContent">就在这时，一场惊心动魄的冒险开始了...</p>
                                </div>
                            </div>
                            <div class="response-actions">
                                <button class="btn btn-secondary" id="regenerateIdiomBtn">
                                    <span class="btn-icon">🔄</span>
                                    重新接龙
                                </button>
                                <button class="btn btn-primary" id="continueIdiomBtn">
                                    <span class="btn-icon">✏️</span>
                                    轮我来接
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 用户继续成语输入区 -->
                    <div class="continue-idiom-section" id="continueIdiomSection" style="display: none;">
                        <div class="input-group">
                            <label for="continueIdiomInput">接龙成语：</label>
                            <div class="idiom-input-wrapper">
                                <input 
                                    type="text" 
                                    id="continueIdiomInput" 
                                    placeholder="请输入以指定字开头的成语"
                                    maxlength="4"
                                >
                                <div class="idiom-hint-display" id="idiomHintDisplay">
                                    提示：请输入以"<span id="requiredChar">某</span>"字开头的成语
                                </div>
                            </div>
                            <div class="input-footer">
                                <span class="idiom-suggestions">
                                    <span class="suggestions-label">推荐成语：</span>
                                    <span class="suggestion-list" id="suggestionList"></span>
                                </span>
                                <button class="btn btn-primary" id="submitIdiomBtn">
                                    <span class="btn-icon">🎯</span>
                                    提交成语
                                </button>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </main>

            <!-- 故事统计 -->
            <section class="story-stats" id="storyStats">
                <div class="stats-item">
                    <span class="stats-icon">📖</span>
                    <div>
                        <span class="stats-value" id="storyLength">0</span>
                        <span class="stats-label">故事字数</span>
                    </div>
                </div>
                <div class="stats-item">
                    <span class="stats-icon">🔄</span>
                    <div>
                        <span class="stats-value" id="turnCount">0</span>
                        <span class="stats-label">接龙轮次</span>
                    </div>
                </div>
                <div class="stats-item">
                    <span class="stats-icon">⏱️</span>
                    <div>
                        <span class="stats-value" id="timeElapsed">0:00</span>
                        <span class="stats-label">创作时间</span>
                    </div>
                </div>
            </section>

            <!-- 成语接龙统计 -->
            <section class="idiom-stats" id="idiomStats" style="display: none;">
                <div class="stats-item">
                    <span class="stats-icon">🏮</span>
                    <div>
                        <span class="stats-value" id="idiomCount">0</span>
                        <span class="stats-label">成语数量</span>
                    </div>
                </div>
                <div class="stats-item">
                    <span class="stats-icon">🔄</span>
                    <div>
                        <span class="stats-value" id="idiomTurnCount">0</span>
                        <span class="stats-label">接龙轮次</span>
                    </div>
                </div>
                <div class="stats-item">
                    <span class="stats-icon">📚</span>
                    <div>
                        <span class="stats-value" id="learnedIdioms">0</span>
                        <span class="stats-label">学会成语</span>
                    </div>
                </div>
                <div class="stats-item">
                    <span class="stats-icon">⏱️</span>
                    <div>
                        <span class="stats-value" id="idiomTimeElapsed">0:00</span>
                        <span class="stats-label">学习时间</span>
                    </div>
                </div>
            </section>
        </main>

        <!-- 底部工具栏 -->
        <footer class="footer">
            <div class="toolbar">
                <button class="tool-btn" id="saveBtn" title="保存故事">
                    <span>💾</span>
                </button>
                <button class="tool-btn" id="loadBtn" title="加载故事">
                    <span>📂</span>
                </button>
                <button class="tool-btn" id="newStoryBtn" title="新故事">
                    <span>🆕</span>
                </button>
                <button class="tool-btn" id="downloadBtn" title="下载故事">
                    <span>⬇️</span>
                </button>
                <button class="tool-btn" id="shareBtn" title="分享故事">
                    <span>🔗</span>
                </button>
                <button class="tool-btn" id="statsBtn" title="学习统计">
                    <span>📊</span>
                </button>
                <button class="tool-btn" id="achievementsBtn" title="成就系统">
                    <span>🏆</span>
                </button>
            </div>
            <div class="copyright">
                <p>© 2024 故事接龙生成器 - 点燃孩子创造力的火花</p>
            </div>
        </footer>
    </div>

    <!-- 模态框 - 提示信息 -->
    <div class="modal" id="messageModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">提示</h3>
                <button class="modal-close" id="modalClose">&times;</button>
            </div>
            <div class="modal-body" id="modalBody"></div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="modalConfirm">确定</button>
            </div>
        </div>
    </div>

    <!-- 学习统计模态框 -->
    <div class="modal" id="statsModal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>📊 学习统计</h3>
                <button class="modal-close stats-modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="stats-tabs">
                    <button class="stats-tab active" data-stats="story">故事统计</button>
                    <button class="stats-tab" data-stats="idiom">成语统计</button>
                    <button class="stats-tab" data-stats="overall">总体统计</button>
                </div>
                <div class="stats-content">
                    <!-- 故事统计内容 -->
                    <div class="stats-panel active" id="storyStatsPanel">
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon">📖</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalStoryWords">0</span>
                                    <span class="stat-label">总故事字数</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">🔄</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalStoryTurns">0</span>
                                    <span class="stat-label">总接龙轮次</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">📚</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalStories">0</span>
                                    <span class="stat-label">完成故事数</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">⏱️</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalStoryTime">0:00</span>
                                    <span class="stat-label">总创作时间</span>
                                </div>
                            </div>
                        </div>
                        <div class="progress-section">
                            <h4>今日进度</h4>
                            <div class="progress-bar">
                                <div class="progress-fill" id="todayStoryProgress" style="width: 0%"></div>
                            </div>
                            <p>今日创作 <span id="todayStoryWords">0</span> 字</p>
                        </div>
                    </div>
                    
                    <!-- 成语统计内容 -->
                    <div class="stats-panel" id="idiomStatsPanel">
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon">🏮</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalIdiomsLearned">0</span>
                                    <span class="stat-label">学会成语</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">🔄</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalIdiomTurns">0</span>
                                    <span class="stat-label">接龙轮次</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">⏱️</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalIdiomTime">0:00</span>
                                    <span class="stat-label">学习时间</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">🎯</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="idiomChainLength">0</span>
                                    <span class="stat-label">最长接龙</span>
                                </div>
                            </div>
                        </div>
                        <div class="progress-section">
                            <h4>成语掌握程度</h4>
                            <div class="progress-bar">
                                <div class="progress-fill" id="idiomMasteryProgress" style="width: 0%"></div>
                            </div>
                            <p>已掌握 <span id="idiomMasteryCount">0</span>/25 个常用成语</p>
                        </div>
                    </div>
                    
                    <!-- 总体统计内容 -->
                    <div class="stats-panel" id="overallStatsPanel">
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-icon">🌟</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalXP">0</span>
                                    <span class="stat-label">总经验值</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">🏆</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="totalAchievements">0</span>
                                    <span class="stat-label">获得成就</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">📅</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="studyDays">0</span>
                                    <span class="stat-label">学习天数</span>
                                </div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-icon">🔥</div>
                                <div class="stat-info">
                                    <span class="stat-value" id="currentStreak">0</span>
                                    <span class="stat-label">连续天数</span>
                                </div>
                            </div>
                        </div>
                        <div class="streak-info">
                            <h4>学习连击</h4>
                            <div class="streak-calendar" id="streakCalendar"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="resetStatsBtn">重置统计</button>
                <button class="btn btn-primary stats-modal-close">关闭</button>
            </div>
        </div>
    </div>

    <!-- 成就系统模态框 -->
    <div class="modal" id="achievementsModal">
        <div class="modal-content modal-large">
            <div class="modal-header">
                <h3>🏆 成就系统</h3>
                <button class="modal-close achievements-modal-close">&times;</button>
            </div>
            <div class="modal-body">
                <div class="achievement-categories">
                    <button class="achievement-category active" data-category="all">全部</button>
                    <button class="achievement-category" data-category="story">故事创作</button>
                    <button class="achievement-category" data-category="idiom">成语学习</button>
                    <button class="achievement-category" data-category="milestone">里程碑</button>
                </div>
                <div class="achievements-grid" id="achievementsGrid">
                    <!-- 成就项目将通过JavaScript动态生成 -->
                </div>
            </div>
            <div class="modal-footer">
                <div class="achievement-summary">
                    <span>已解锁: <span id="unlockedCount">0</span>/<span id="totalCount">0</span></span>
                    <span>完成度: <span id="achievementProgress">0%</span></span>
                </div>
                <button class="btn btn-primary achievements-modal-close">关闭</button>
            </div>
        </div>
    </div>

    <script src="idiom-database.js"></script>
    <script src="achievements-system.js"></script>
    <script src="script.js"></script>
</body>
</html>